<template>
  <div class="user-manager content">
    <div class="header">
      <el-form :inline="true" :model="formItem">
        <el-form-item label="订单ID">
          <el-input placeholder="请输入订单ID"></el-input>
        </el-form-item>
        <el-form-item label="用户ID" style="margin-left: 30px;">
          <el-input placeholder="请输入用户ID"></el-input>
        </el-form-item>
        <el-form-item label="订单生成时间" style="margin-left: 30px;">
          <el-date-picker
              v-model="value1"
              type="date"
              placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button style="margin-left: 30px;" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div style="margin-top: 20px;">
      <el-button type="primary">新增订单</el-button>
      <el-button type="warning">批量发货</el-button>
      <el-button type="danger">删除订单</el-button>
    </div>
    <div class="table" style="background: #ffffff;">
      <el-table :data="tableData" style="width: 100%" :header-cell-style="{background: '#3C8DBC',color: '#fff'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="id" label="订单ID号"></el-table-column>
        <el-table-column prop="name" label="订单状态"></el-table-column>
        <el-table-column prop="email" label="用户ID"></el-table-column>
        <el-table-column prop="password" label="商品配送情况"></el-table-column>
        <el-table-column prop="answer" label="收货人姓名"></el-table-column>
        <el-table-column prop="birthday" label="收货地址"></el-table-column>
        <el-table-column prop="address" label="手机号码"></el-table-column>
        <el-table-column label="操作" width="340" header-align="center" align="center">
          <template v-slot="scoped">
            <el-button type="primary" size="mini" plain>编辑</el-button>
            <el-button type="warning" size="mini" plain>发货</el-button>
            <el-button type="danger" size="mini" plain>删除</el-button>
            <el-button type="primary" size="mini" plain>查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px; height: 50px;text-align: right;">
        <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formItem: {

      },
      tableData: [
        {id: '12323212',name: '待支付',email: '024212',password: '待发货',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '34342133',name: '待支付',email: '411252',password: '已发货',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '43535343',name: '已支付',email: '354420',password: '已发货',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '54243453',name: '已支付',email: '354420',password: '配送中',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '54345345',name: '已支付',email: '234454',password: '配送中',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '98888544',name: '已支付',email: '234454',password: '待发货',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
        {id: '83434534',name: '已支付',email: '455574',password: '待发货',answer: '张某某', birthday: '1999-03-12',address: '12345624535'},
      ],
      value1: ''
    }
  },
  methods: {

  }
}
</script>
<style lang="less" scoped>
.user-manager{
  text-align: left;
  margin: 20px;
  .header{
    padding: 20px;
    background: #ffffff;
    .el-form-item{
      margin: 0;
    }
  }
  .mids{
    img{
      width: 50px;
      height: 50px;
    }
  }
  .table{
    margin-top: 20px;
  }
}
</style>